import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { classModule } from 'snabbdom/build/package/modules/class'

import { propsModule } from 'snabbdom/build/package/modules/props.js'
import { styleModule } from 'snabbdom/build/package/modules/style.js'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners.js'

const patch = init([classModule, propsModule, styleModule, eventListenersModule])
let vnode = null
// 排序类型
let sortBy = ''
// 学号
let nextNum = 11
const originalData = [
  {score: 100, name: '张三', class: '五年3班', num: 1},
  {score: 100, name: '李四', class: '五年2班', num: 2},
  {score: 68, name: '王五', class: '五年2班', num: 3},
  {score: 78, name: '赵六', class: '五年2班', num: 4},
  {score: 88, name: '孙七', class: '五年2班', num: 5},
  {score: 92, name: '周八', class: '五年2班', num: 6},
  {score: 93, name: '吴九', class: '五年3班', num: 7},
  {score: 94, name: '郑十', class: '五年3班', num: 8},
  {score: 84, name: '刘一', class: '五年3班', num: 9},
  {score: 87, name: '陈二', class: '五年3班', num: 10}
]

let data = [...originalData]

/**
 * 数字转中文
 * @param num
 * @return {string}
 */
function toChinesNum(num) {
  let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  let unit = ["", "十", "百", "千", "万"];
  num = parseInt(num);
  let getWan = (temp) => {
    let strArr = temp.toString().split("").reverse();
    let newNum = "";
    for (var i = 0; i < strArr.length; i++) {
      newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
    }
    return newNum;
  }
  let overWan = Math.floor(num / 10000);
  let noWan = num % 10000;
  if (noWan.toString().length < 4) {　　　　　　noWan = "0" + noWan;　　　 }
  return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
}

/**
 * 排序切换
 * @param prop
 */
function changeSort(prop) {
  sortBy = prop
  data.sort((a, b) => {
    if (a[prop] > b[prop]) {
      return 1
    }
    if (a[prop] < b[prop]) {
      return -1
    }
    return 0
  })
  render()
}

/**
 * 添加一行
 */
function add () {
  var n = originalData[Math.floor(Math.random() * 10)]
  const num =  nextNum++
  data = [{ num, name: n.name.substring(0, 1) + toChinesNum(num), class: n.class,  score: Math.floor(Math.random() * 100)}].concat(data)
  render()
  // render()
}

/**
 * 删除一行
 * @param item
 */
function remove (item) {
  data = data.filter((m) => {
    return m !== item
  })
  render()
}

/**
 * 渲染页面
 */
function render() {
  vnode = patch(vnode, view(data))
}

/**
 * 根据数据生成虚拟dom
 * @param data
 */
function view(data) {
  // 生成行节点
  const rowsVNode = data.map(item => {
    return h('tr', {
          key: item.num,
          style: {
            opacity: '0',
            transform: 'translateX(-200px) scale(0.5)',
            delayed: { transform: `translateX(0) scale(1)`, opacity: '1' },
            // remove导致节点无法删除？
            // remove: { transform: 'translateX(-200px)', opacity: '0' }
          },
          // hook: { insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight } },
        }, [
        h('td', item.name),
        h('td', item.score),
        h('td', item.class),
        h('td', [h('a.btn.remove', { on: { click: [remove, item] } }, 'Remove')])
    ])
  })
  return h('div#app', [
      h('h1', '单元测试统计'),
      h('div', [
        h('a.btn.add', { on: { click: add } }, 'Add'),
        'Sort by: ',
        h('span.btn-group', [
          h('a.btn.score', { class: { active: sortBy === 'score' }, on: { click: [changeSort, 'score'] } }, 'Score'),
          h('a.btn.name', { class: { active: sortBy === 'name' }, on: { click: [changeSort, 'name'] } }, 'Name'),
          h('a.btn.class', { class: { active: sortBy === 'class' }, on: { click: [changeSort, 'class'] } }, 'Class'),
        ]),
      ]),
      h('table',[
        h('thead', [
            h('th', 'Name'),
            h('th', 'Score'),
            h('th', 'Class'),
            h('th', 'Operate')
        ]),
        h('tbody', rowsVNode)
      ])
  ])
}

// 页面加载完成后开始渲染节点
window.addEventListener('DOMContentLoaded', () => {
  var container = document.getElementById('app')
  vnode = patch(container, view(data))
  render()
})
